<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>11.浮动</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			#box{width:1000px;height:1000px;border:1px solid red;margin:50px auto;}
			#box .box-top{width:100%;height:30px;border:1px solid #ccc;margin-top:10px;}
			#box .box-top p{width:80px;height:30px;float:left;text-align:center;line-height:30px;}
			#box .box-top:after{content:"";clear:both;}
			#box ul  li{margin:15px;float:left;} 
			#box ul  li img{width:200px;height:200px;border:1px solid rgba(218,213,57,.5);border-radius:50%;box-shadow:0 0 3px 5px #d8cd80;}
			#box ul  li p{margin-top:10px;text-shadow:5px 5px 1px #f66;}
			#box ul  p{font-size:0;}
			#box ul  li:hover img{transform:scale(1.05);}
			#box ul  li:hover p{font-size:12px;}
		</style>
	</head>
	<body>
		
		<div id="box">
			<div class="box-top">
				<p>流行</p>
				<p>热销</p>
				<p>上新</p>
				<p>价格</p>
			</div>
			<ul>
				<li>
					<img src="../images/xh_img1.jpg" alt="img1" />
					<p>粉色玫瑰浪漫系列</p>
				</li>
				<li>
					<img src="../images/xh_img2.jpg" alt="img2" />
					<p>深红色经典系列</p>
				</li>
				<li>
					<img src="../images/xh_img3.jpg" alt="img3" />
					<p>清单优雅百年百合</p>
				</li>
				<li>
					<img src="../images/xh_img4.jpg" alt="img4" />
					<p>紫色冷艳系列</p>
				</li>
				<li>
					<img src="../images/xh_img5.jpg" alt="img5" />
					<p>红玫瑰</p>
				</li>
				<li>
					<img src="../images/xh_img6.jpg" alt="img6" />
					<p>蓝色妖姬</p>
				</li>
				<li>
					<img src="../images/xh_img7.jpg" alt="img7" />
					<p>粉色女郎系列</p>
				</li>
				<li>
					<img src="../images/xh_img8.jpg" alt="img8" />
					<p>郁金香系列</p>
				</li>
				<li>
					<img src="../images/xh_img9.png" alt="img9" />
					<p>粉色玫瑰浪漫系列</p>
				</li>
				<li>
					<img src="../images/xh_img10.png" alt="img10" />
					<p>粉色玫瑰浪漫系列</p>
				</li>
				<li>
					<img src="../images/xh_img11.jpg" alt="img11" />
					<p>粉色玫瑰浪漫系列</p>
				</li>
				<li>
					<img src="../images/xh_img2.jpg" alt="1" />
					<p>粉色玫瑰浪漫系列</p>
				</li>

			</ul>
		</div>
	</body>
</html>
